<template>
  <div class="member-address-page">
    <!-- 顶部标题 -->
    <div class="xtx-center-head">
      <h4 class="title fl">收货地址</h4>
      <p class="text fl">（地址最多<span>10</span>条，还能保存<span>{{10-addressList.length}}</span>条）</p>
      <a @click="add()" class="add fr" href="javascript:;">+ 新建地址</a>
    </div>
    <!-- 内容区域 -->
    <div v-if="addressList.length">
      <div class="xtx-address-item" v-for="item in addressList" :key="item.id">
        <div class="info">
          <p>
            <span>收<i></i>货<i></i>人：</span>
            <span>{{item.receiver}}</span>
          </p>
          <p>
            <span>联系方式：</span>
            <span>{{item.contact|vagueMobile}}</span>
          </p>
          <p>
            <span>收货地址：</span>
            <span>{{item.fullLocation && item.fullLocation.replace(/ /g,'')}}{{item.address}}</span>
          </p>
        </div>
        <div class="btn">
          <a href="javascript:;" class="active" v-if="item.isDefault===0">默认地址</a>
          <a @click="setDefault(item.id)" href="javascript:;" v-else>设为默认</a>
          <a @click="edit(item)" href="javascript:;">编辑</a>
          <a class="red" @click="remove(item.id)" href="javascript:;">删除</a>
        </div>
      </div>
    </div>
    <div v-else class="xtx-center-none">
      <img src="../../../assets/images/none.png" alt="">
      <p>当前还未添加收货地址</p>
    </div>
    <address-new ref="addressNew" :address="currentAddress" @on-complete="updateList"></address-new>
  </div>
</template>

<script>
import AddressNew from './components/address-new'
export default {
  name: 'member-address-page',
  components: { AddressNew },
  data () {
    return {
      addressList: [],
      currentAddress: {}
    }
  },
  created () {
    this.getAddressList()
  },
  methods: {
    edit (item) {
      this.currentAddress = item
      this.$nextTick(() => {
        this.$refs.addressNew.open()
      })
    },
    add () {
      if (this.addressList.length >= 10) {
        return this.$message({ type: 'warn', message: '最多添加10条' })
      }
      this.currentAddress = {}
      this.$nextTick(() => {
        this.$refs.addressNew.open()
      })
    },
    async remove (id) {
      this.$confirm({ title: '温馨提示', text: '您确认删除该收货地址吗？' }).then(async (valid) => {
        if (valid) {
          await this.$http.delete('/member/address/' + id)
          this.$message({ type: 'success', message: '删除地址成功' })
          const index = this.addressList.findIndex(item => item.id === id)
          this.addressList.splice(index, 1)
        }
      })
    },
    updateList (form) {
      const item = this.addressList.find(item => item.id === form.id)
      if (item) {
        for (const key in item) {
          item[key] = form[key]
        }
      } else {
        this.addressList.unshift(form)
      }
    },
    async getAddressList () {
      const { data } = await this.$http.get('/member/address')
      this.addressList = data.result
    },
    async setDefault (id) {
      await this.$http.put(`/member/address/${id}`, { isDefault: 0 })
      this.$message({ type: 'success', message: '设置默认成功' })
      this.addressList.forEach(item => {
        if (item.id === id) item.isDefault = 0
        else item.isDefault = 1
      })
    }
  }
}
</script>

<style scoped lang='less'>
@import './styles/index.less';
</style>
